<!-- 学员个人信息 -->
<template>
  <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" :size="formSize" status-icon>
    <el-divider content-position="left">基本信息</el-divider>
    <el-row>
      <el-col :span="12">
        <el-form-item label="学员姓名" prop="name" required>
          <el-input v-model="ruleForm.name" width="100" />
        </el-form-item>

        <el-form-item label="性别" prop="sex" required>
          <div class="mb-2 flex items-center text-sm">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item label="身份证号" prop="cardId" required>
          <el-input v-model="ruleForm.cardId" />
        </el-form-item>

        <el-form-item label="手机号码" prop="tel" required>
          <el-input v-model="ruleForm.tel" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="头像" prop="avatar">
          <StuUpload :v-model="ruleForm.avatar"></StuUpload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">报名信息</el-divider>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="schoolName" label="报考校区" required>
          <el-select v-model="ruleForm.schoolName" placeholder="选择报考校区" required>
            <el-option v-for="item in optionsSchool" :label="item.schoolName" :value="item.objectId" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="isIndigen" label="所在区域">
          <el-select v-model="ruleForm.isIndigen" placeholder="选择本地外地" required>
            <el-option label="本地" value="本地" />
            <el-option label="外地" value="外地" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="type" label="报考班型" required>
          <el-select v-model="ruleForm.type" placeholder="选择报考班型" required>
            <el-option v-for="item in optionsClass" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="carType" label="准驾车型" required>
          <el-select v-model="ruleForm.carType" placeholder="选择准驾车型" required>
            <el-option v-for="item in optionstype" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="Regtime" label="注册时间" required>
          <el-date-picker v-model="ruleForm.Regtime" type="date" placeholder="请选择日期" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="referrer" label="推荐人">
          <el-input v-model="ruleForm.referrer" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="地址" prop="address" required>
      <el-input v-model="ruleForm.address" placeholder="请输入地址" />
    </el-form-item>

    <el-form-item label="备注" prop="content">
      <el-input v-model="ruleForm.content" placeholder="请输入备注内容" />
    </el-form-item>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="coach1" label="科二教练">
          <el-select v-model="ruleForm.coach1" placeholder="预选教练" required>
            <el-option v-for="item in optionsCocah2" :label="item.name" :value="item.objectId" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="coach2" label="科三教练">
          <el-select v-model="ruleForm.coach2" placeholder="预选教练" required>
            <el-option v-for="item in optionsCocah3" :label="item.name" :value="item.objectId" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确认修改学员档案
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import StuUpload from "./stu-imgupload.vue";
import { StuGet, StuRenewalPut, SchoolNameGet } from "../../../api/students";
import { ref} from "vue";
import { useRoute, useRouter } from "vue-router";
import type { FormInstance } from "element-plus";
import { SchoolType } from "../../../types/school";

import { coachGet } from "../../../api/coachmange";
import { CoachType } from "../../../types/coach";

interface RuleForm {
  name: string;
  sex: string;
  cardId: string;
  tel: string;
  avatar: string;
  schoolName: string;
  isIndigen: string;
  type: string;
  carType: string;
  Regtime: string;
  referrer?: string;
  address: string;
  content?: string;
  coach1?: string;
  coach2?: string;
  updatedAt?: Date;
  createdAt?: Date;
}

const route = useRoute();
const router = useRouter();
let id= route.query.objectId as string
console.log(route.query);


StuGet(id).then((res) => {
  ruleForm.value = res.data;
});


// 接收方法;

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref<RuleForm>({
  name: "",
  sex: "",
  cardId: "",
  tel: "",
  avatar: "",
  schoolName: "",
  isIndigen: "",
  type: "",
  carType: "",
  Regtime: "",
  referrer: "",
  address: "",
  content: "",
  coach1: "",
  coach2: "",
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      delete ruleForm.value.updatedAt;
      delete ruleForm.value.createdAt;
      console.log(ruleForm.value);
      StuRenewalPut(id, ruleForm.value).then(() => {
        router.push("/students/list");
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

SchoolNameGet().then((res) => {
  optionsSchool.value = res.data.results;
});
const optionsSchool = ref<SchoolType[]>([]);

const optionsClass = ref<string[]>([
  "学生特惠班，2600.00元",
  "社会速成班，2682.00元",
  "学生速成班，2300.00元",
  "农用经济班，1000.00元",
  "社会全包班，7000.00元",
  "农用速成班，6000.00元",
  "农用特惠班，800.00元",
  "摩托速成班，500.00元",
]);

const optionstype = ref<string[]>([
  "A1",
  "A3",
  "B1",
  "B2",
  "C1",
  "C2",
  "D",
  "E",
  "F",
]);

coachGet().then((res) => {
  optionsCocah2.value = res.data.results.filter(
    (item: CoachType) => item.object === "科目二"
  );
  optionsCocah3.value = res.data.results.filter(
    (item: CoachType) => item.object === "科目三"
  );
});
const optionsCocah2 = ref<CoachType[]>();
const optionsCocah3 = ref<CoachType[]>();
</script>
